<template>
	<homePage></homePage>
	<view class="page">
		<WaterfallsFlow :wfList="list" @itemTap="itemTap" />
	</view>
	<image src="../../static/手机/手机5.jpg" mode=""></image>
</template>

<script setup>
	import {
		ref,
		onMounted,
	} from 'vue';
	import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'; 
	import WaterfallsFlow from '../../components/WaterfallsFlow/WaterfallsFlow.vue';
	import homePage from "@/components/homePage/homePage.vue";

	// 定义响应式数据
	const list = ref([]);
	const requiredData = ref([{
			image: '../../static/主板/主板1.jpg',
			avatar: 'https://cdn.pixabay.com/user/2015/10/12/02-06-28-605_250x250.jpg',
			nickName: 'rFonz'
		},
		{
			image: '../../static/显卡/显卡3.jpg',
			avatar: 'https://cdn.pixabay.com/user/2015/10/12/02-06-28-605_250x250.jpg',
			nickName: 'VlacK_HammeR'
		},
		{
			image: '../../static/主板/主板2.jpg',
			avatar: 'https://cdn.pixabay.com/user/2015/10/12/02-06-28-605_250x250.jpg',
			nickName: 'Alexas_Fotos'
		},
		{
			image: '../../static/显卡/显卡4.jpg',
			avatar: 'https://cdn.pixabay.com/user/2015/10/12/02-06-28-605_250x250.jpg',
			nickName: 'phil454'
		},
		{
			image: '../../static/显卡/显卡5.jpg',
			avatar: 'https://cdn.pixabay.com/user/2015/10/12/02-06-28-605_250x250.jpg',
			nickName: 'NickyPe'
		},
		{
			image: '../../static/主板/主板3.jpg',
			avatar: 'https://cdn.pixabay.com/user/2015/10/12/02-06-28-605_250x250.jpg',
			nickName: 'freephotocc'
		},
		{
			image: '../../static/玩偶/玩偶2.jpg',
			avatar: 'https://cdn.pixabay.com/user/2015/10/12/02-06-28-605_250x250.jpg',
			nickName: 'GDJ'
		},
		{
			image: '../../static/玩偶/玩偶1.jpg',
			avatar: 'https://cdn.pixabay.com/user/2015/10/12/02-06-28-605_250x250.jpg',
			nickName: 'pasja1000'
		},
		{
			image: '../../static/玩偶/玩偶3.jpg',
			avatar: 'https://cdn.pixabay.com/user/2015/10/12/02-06-28-605_250x250.jpg',
			nickName: 'Syaibatulhamdi'
		},
		{
			image: '../../static/手机/手机5.jpg',
			avatar: 'https://cdn.pixabay.com/user/2015/10/12/02-06-28-605_250x250.jpg',
			nickName: 'matthiasboeckel'
		},
		{
			image: '../../static/手机/手机1.jpg',
			avatar: 'https://cdn.pixabay.com/user/2015/10/12/02-06-28-605_250x250.jpg',
			nickName: 'matthiasboeckel'
		}
	]);

	// 模拟请求数据
	onMounted(() => {
		setTimeout(() => {
			list.value = requiredData.value;
			console.log(list.value);
		}, 500);
	});

	// 模拟触底刷新
	onReachBottom(() => {
		setTimeout(() => {
			const newData = requiredData.value.slice(0, 5);
			list.value = [...list.value, ...newData];
		}, 500);
	});

	// 模拟上拉刷新
	onPullDownRefresh(() => {
		setTimeout(() => {
			const newList = [...requiredData.value].reverse();
			list.value = newList;
			uni.stopPullDownRefresh();
		}, 500);
	});

	// item 点击事件处理函数
	const itemTap = (item) => {
		console.log(item);
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #eee;
	}
</style>